<template>
  <div>
    <div style="margin-left: 10px; margin-right: 10px;">
      <div class="flyray-top">
        <!-- 顶部导航栏 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="项目任务" :lazy="true" name="first">
            <protask v-if="isFirst" />
          </el-tab-pane>
          <el-tab-pane label="项目成员" :lazy="true" name="second">
            <promember v-if="isSecond" />
          </el-tab-pane>
          <el-tab-pane label="项目角色" :lazy="true" name="fourth">
            <role v-if="isFourth" />
          </el-tab-pane>
          <el-tab-pane label="项目燃尽图" :lazy="true" name="fifth">
            <burn-out-chart v-if="isFifth" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import top from "@/components/top/";
import protask from "./protask";
import promember from "./promember";
import role from "./role";
import burnOutChart from "./burnOutChart";

export default {
  name: "Index",
  components: {
    // top
    protask,
    promember,
    role,
    burnOutChart
  },
  data() {
    return {
      activeName: "first",
      currentDate: new Date().getDate(),
      isFirst: true,
      isSecond: true,
      isFourth: true,
      isFifth: true
    };
  },
  created() {},
  destroyed() {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.activeName == "first") {
        this.isFirst = true;
        this.isSecond = false;
        this.isFourth = false;
        this.isFifth = false;
      } else if (this.activeName == "second") {
        this.isFirst = false;
        this.isSecond = true;
        this.isFourth = false;
        this.isFifth = false;
      } else if (this.activeName == "fourth") {
        this.isFirst = false;
        this.isSecond = false;
        this.isFourth = true;
        this.isFifth = false;
      } else if (this.activeName == "fifth") {
        this.isFirst = false;
        this.isSecond = false;
        this.isFourth = false;
        this.isFifth = true;
      }
    }
  }
};
</script>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
